style: Clean up dialogs stylesheet to fix layout issues

- remove unnecessary dialog type-specific padding, spacing and margin definitions that led to layout to problems
- bump the size of user avatar in authentication dialog
- nest css classes in the sass to better reflect the structure of dialog elements
- sync style of audio device selector with switcher-popup style
- sync text and padding styles with other elements
- fix incorrect button order in audio selection dialog

Closes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/7876
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3473>

diff --git a/data/theme/gnome-shell-sass/widgets/_dialogs.scss b/data/theme/gnome-shell-sass/widgets/_dialogs.scss
index c08eb91ba56336a20098157828dd3c8c027aa683..4136bfce5cde0847b0105dab82255acd9c7e191b 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_dialogs.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dialogs.scss
@@ -1,24 +1,49 @@
 /* Modal Dialogs */
 
-.headline {
-  @extend %title_4;
-}
-
+// style for all dialogs
 .modal-dialog {
   background-color: $bg_color;
   border-radius: $alert_radius;
-  box-shadow: inset 0 0 0 1px $outer_borders_color;
   padding: $base_padding * 4;
+  spacing: $base_padding * 3;
+  box-shadow: 0 12px 8px 12px rgba(0,0,0,0.03);
 
   .modal-dialog-content-box {
-    spacing: $base_margin * 8;
-    margin-top: $base_margin * 2;
-    margin-bottom: $base_margin * 4;
+    padding-top: $base_padding * 2;
+    spacing: $base_padding * 3;
     max-width: 28em;
   }
 
-  .modal-dialog-linked-button {
-    @extend %dialog_button;
+  .modal-dialog-button-box {
+    padding-top: $base_padding;
+    .modal-dialog-button {
+      @extend %dialog_button;
+    }
+  }
+}
+
+// lists in dialogs
+.dialog-list {
+  spacing: $base_padding * 3;
+
+  .dialog-list-title {
+    @extend %heading;
+    text-align: center;
+  }
+
+  .dialog-list-scrollview { max-height: 200px; }
+  .dialog-list-box {
+    spacing: 1em;
+
+    .dialog-list-item {
+      spacing: 1em;
+
+      .dialog-list-item-title { font-weight: bold; }
+      .dialog-list-item-description {
+        @extend %caption;
+        color: darken($fg_color,5%);
+      }
+    }
   }
 }
 
@@ -26,9 +51,14 @@
 .end-session-dialog {
   width: 24em;
 
+  // special style for session warnings
   .end-session-dialog-battery-warning,
   .dialog-list-title {
     color: $warning_color;
+    background-color: transparentize($warning_color, 0.9);
+    padding: $base_padding * 1.5;
+    border-radius: $base_border_radius;
+    margin: $base_margin 0;
   }
 }
 
@@ -40,125 +70,102 @@
     text-align: center;
     @extend %title_2;
 
-    &.lightweight { @extend %title_4;}
+    &.lightweight {
+      @extend %title_4;
+    }
   }
-  .message-dialog-description { text-align: center; }
-}
-
-/* Dialog List */
-.dialog-list {
-  spacing: $base_padding * 3;
-
-  .dialog-list-title {
+  .message-dialog-description {
     text-align: center;
-    @extend %heading;
-  }
-
-  .dialog-list-scrollview { max-height: 200px; }
-  .dialog-list-box {
-    spacing: 1em;
-
-    .dialog-list-item {
-      spacing: 1em;
-
-      .dialog-list-item-title { font-weight: bold; }
-      .dialog-list-item-description {
-        color: darken($fg_color,5%);
-        @extend %caption;
-      }
-    }
   }
 }
 
 /* Run Dialog */
 .run-dialog {
-  .modal-dialog-content-box {
-    margin-top: $base_padding * 4;
-    margin-bottom: $base_padding * 2;
+  width: 24em;
+
+  // run dialog needs to override bottom padding
+  // to account for inexplicable extra padding
+  padding-bottom: $base_padding;
+
+  .run-dialog-entry {
+    padding: $base_padding * 2 $base_padding * 1.5;
   }
-  .run-dialog-entry { width: 20em; }
   .run-dialog-description {
     @extend %caption;
-    text-align: center;
     color: darken($fg_color, 20%);
   }
 }
 
 /* Password or Authentication Dialog */
-
 .prompt-dialog {
   width: 28em;
 
-  .modal-dialog-content-box {
-    margin-bottom: $base_margin * 6;
-  }
-}
-
-.prompt-dialog-password-grid {
-  spacing-rows: $base_margin * 2;
-  spacing-columns: $base_margin;
-
-  .prompt-dialog-password-entry {
-    width: auto;
+  .prompt-dialog-password-grid {
+    spacing-rows: $base_margin * 2;
+    spacing-columns: $base_margin;
 
-    // 4px (spacing) + 16px (spinner-width)
-    &:ltr { margin-left: $base_margin+$base_icon_size; }
-    &:rtl { margin-right: $base_margin+$base_icon_size; }
+    .prompt-dialog-password-entry {
+      width: auto;
+      padding: $base_padding * 2 $base_padding * 1.5;
+      // 4px (spacing) + 16px (spinner-width)
+      &:ltr { margin-left: $base_margin+$base_icon_size; }
+      &:rtl { margin-right: $base_margin+$base_icon_size; }
+    }
   }
-}
-
-.prompt-dialog-password-layout {
-  spacing: $base_margin * 2;
-}
 
-.prompt-dialog-password-entry {
-  width: 20em;
-}
+  .prompt-dialog-password-layout {
+    spacing: $base_margin * 2;
+  }
 
-.prompt-dialog-error-label,
-.prompt-dialog-info-label,
-.prompt-dialog-null-label {
-  text-align: center;
-  @extend %caption;
-}
+  .prompt-dialog-error-label,
+  .prompt-dialog-info-label,
+  .prompt-dialog-null-label {
+    @extend %caption;
+    text-align: center;
+  }
 
-.prompt-dialog-error-label {
-  color: $warning_color;
+  .prompt-dialog-error-label {
+    color: $warning_color;
+  }
 }
 
-
 /* Polkit Dialog */
-
 .polkit-dialog-user-layout {
   text-align: center;
   spacing: $base_margin * 2;
   margin-bottom: $base_padding;
 
-  .polkit-dialog-user-root-label { color: $warning_color; }
+  .polkit-dialog-user-label,
+  .polkit-dialog-user-root-label {
+    @extend %title_4;
+  }
+
+  .polkit-dialog-user-root-label {
+    color: $warning_color;
+  }
 }
 
 /* Audio selection dialog */
 .audio-device-selection-dialog {
-  .modal-dialog-content-box { margin-bottom: $base_margin * 7; }
-  .audio-selection-box { spacing: $base_margin * 5; }
-}
+  min-width: 24em;
 
-.audio-selection-device {
-  border-radius: $base_border_radius * 2;
-  &:hover,&:focus { background-color: $hover_bg_color; }
-  &:active {
-    background-color: -st-accent-color;
-    color: -st-accent-fg-color;
-  }
-}
+  .audio-selection-box {
+    spacing: $base_padding * 2;
 
-.audio-selection-device-box {
-  padding: $base_margin * 5;
-  spacing: $base_margin * 5;
-}
+    // styled similar to switcher-popup
+    .audio-selection-device {
+      @include tile_button($fg:$osd_fg_color, $bg:$osd_bg_color);
 
-.audio-selection-device-icon {
-  icon-size: $base_icon_size * 4;
+      .audio-selection-device-box {
+        padding: $base_padding * 2;
+        spacing: $base_padding * 2;
+      }
+
+      .audio-selection-device-icon {
+        icon-size: $base_icon_size * 4;
+      }
+    }
+  }
 }
 
 /* Welcome dialog */
@@ -173,4 +180,9 @@
 /* Access portal dialog */
 .access-dialog {
   text-align: center;
-}
\ No newline at end of file
+}
+
+// specific label style for restart message
+.restart-message {
+  @extend %title_4;
+}

diff --git a/js/ui/audioDeviceSelection.js b/js/ui/audioDeviceSelection.js
index d4d5e12abf72090164a46a18c33428248b313834..bc6b263b7012112ebd1032fc771a0b67eeba9180 100644 (file)
--- a/js/ui/audioDeviceSelection.js
+++ b/js/ui/audioDeviceSelection.js
@@ -55,17 +55,18 @@ const AudioDeviceSelectionDialog = GObject.registerClass({
 
         this.contentLayout.add_child(content);
 
+        this.addButton({
+            action: () => this.close(),
+            label: _('Cancel'),
+            key: Clutter.KEY_Escape,
+        });
+
         if (Main.sessionMode.allowSettings) {
             this.addButton({
                 action: this._openSettings.bind(this),
                 label: _('Sound Settings'),
             });
         }
-        this.addButton({
-            action: () => this.close(),
-            label: _('Cancel'),
-            key: Clutter.KEY_Escape,
-        });
     }
 
     _getDeviceLabel(device) {

diff --git a/js/ui/components/polkitAgent.js b/js/ui/components/polkitAgent.js
index 10ac3563f6b60afc794af9eb0a833576eb74aab4..fbee70230710e1e6c39e68d805fe9715964f4373 100644 (file)
--- a/js/ui/components/polkitAgent.js
+++ b/js/ui/components/polkitAgent.js
@@ -21,7 +21,7 @@ const DialogMode = {
     CONFIRM: 1,
 };
 
-const DIALOG_ICON_SIZE = 64;
+const DIALOG_ICON_SIZE = 96;
 
 const DELAYED_RESET_TIMEOUT = 200;
 

diff --git a/js/ui/dialog.js b/js/ui/dialog.js
index 3f918981c7fa9018622ee202e9060edbfa4dcf97..8db4eb5ce6d164b357262f3c7a2f77685de3b92e 100644 (file)
--- a/js/ui/dialog.js
+++ b/js/ui/dialog.js
@@ -56,6 +56,7 @@ class Dialog extends St.Widget {
         this._dialog.add_child(this.contentLayout);
 
         this.buttonLayout = new St.Widget({
+            style_class: 'modal-dialog-button-box',
             layout_manager: new Clutter.BoxLayout({
                 spacing: 12,
                 homogeneous: true,
@@ -124,7 +125,7 @@ class Dialog extends St.Widget {
             keys = [];
 
         let button = new St.Button({
-            style_class: 'modal-dialog-linked-button',
+            style_class: 'modal-dialog-button',
             button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE,
             reactive: true,
             can_focus: true,

diff --git a/js/ui/main.js b/js/ui/main.js
index a854fa04c5d14108d91125f8a1011ba2a170bb1e..25c28b2407828b90c81a224b28c77e8bfc673cea 100644 (file)
--- a/js/ui/main.js
+++ b/js/ui/main.js
@@ -988,7 +988,7 @@ class RestartMessage extends ModalDialog.ModalDialog {
     _init(message) {
         super._init({
             shellReactive: true,
-            styleClass: 'restart-message headline',
+            styleClass: 'restart-message',
             shouldFadeIn: false,
             destroyOnClose: true,
         });